<template>
  <div>
    <TopBarSearch />
    <div class="profile-container">
      <h2 style="margin-bottom:24px;">添加好友</h2>
      <form @submit.prevent="searchUser" class="edit-form">
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="searchUsername" required />
        <button type="submit" class="search-btn">搜索</button>
      </form>
      <div v-if="userFound" class="user-info">
        <p>找到用户: {{ foundUser.nickname || foundUser.username }}</p>
        <button
          class="add-btn"
          :disabled="isFriend || requestSent"
          @click="sendFriendRequest"
        >
          {{ isFriend ? '已是好友' : (requestSent ? '申请中' : '发送好友请求') }}
        </button>
      </div>
      <div v-if="message" class="message">{{ message }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import TopBarSearch from '../components/TopBarSearch.vue'

const currentUserId = 1 // 实际应从登录信息获取
const searchUsername = ref('')
const foundUser = ref(null)
const userFound = ref(false)
const message = ref('')
const isFriend = ref(false)
const requestSent = ref(false)

async function searchUser() {
  message.value = ''
  isFriend.value = false
  requestSent.value = false
  try {
    const response = await axios.get(`/api/user/search?username=${searchUsername.value}`)
    if (response.data) {
      foundUser.value = response.data
      userFound.value = true
      // 检查是否已是好友
      const checkRes = await axios.get('/api/friends/check', {
        params: {
          senderId: currentUserId,
          receiverId: foundUser.value.id
        }
      })
      isFriend.value = checkRes.data
      // 检查是否已申请
      if (!isFriend.value) {
        const reqList = await axios.get('/api/friends/requests', { params: { userId: foundUser.value.id } })
        requestSent.value = reqList.data.some(r => r.id === currentUserId && r.status === 0)
      }
    } else {
      message.value = '未找到该用户'
      userFound.value = false
    }
  } catch (error) {
    message.value = '搜索用户失败，请重试'
  }
}

async function sendFriendRequest() {
  try {
    const response = await axios.post('/api/friends/add', null, {
      params: {
        senderId: currentUserId,
        receiverId: foundUser.value.id
      }
    })
    if (response.data === 1) {
      message.value = '好友请求已发送'
      requestSent.value = true
    } else {
      message.value = '发送好友请求失败'
    }
  } catch (error) {
    message.value = '发送好友请求失败，请重试'
  }
}
</script>

<style scoped>
.profile-container {
  max-width: 600px;
  margin: 90px auto 40px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 32px 24px;
}
.edit-form label {
  display: block;
  margin-bottom: 12px;
  text-align: left;
}
.edit-form input {
  width: 100%;
  padding: 6px;
  margin-top: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 12px;
}
.search-btn, .add-btn {
  background: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  margin-right: 10px;
  transition: background 0.2s;
}
.search-btn:disabled, .add-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.user-info {
  margin-top: 18px;
  background: #f7f7f7;
  border-radius: 8px;
  padding: 16px;
  font-size: 16px;
}
.message {
  color: #e67e22;
  margin-top: 16px;
  text-align: center;
}
</style>